import React, {useState} from 'react';
import Head from 'next/head';
import {Row, Col, List} from 'antd';
import {CalendarOutlined, FolderOutlined, FireOutlined} from '@ant-design/icons';
import Header from './components/Header';
import '../styles/pages/index.css';
import Author from './components/Author';
import Advert from './components/Advert';
import Footer from './components/footer';

export default function Home() {

	const [ myList, setMyList] = useState([
        {title:'测试左列表数据1',context:'测试左列表内容1'},
        {title:'测试左列表数据2',context:'测试左列表内容2'},
        {title:'测试左列表数据3',context:'测试左列表内容3'},
        {title:'测试左列表数据4',context:'测试左列表内容4'}
    ])

  return (
    <div>
      	<Head>
			<title>Home</title>
			<link rel="icon" href="/favicon.ico" />
		</Head>
		<Header/>
		<Row className='comm-main' justify='center' >
			<Col className='comm-left' xs={24} sm={24} md={16} lg={18} xl={14} >
				<List 
					header={<div>最新日志</div>}
					itemLayout='vertical'
					dataSource={myList}
					renderItem={item => (
						<List.Item>
							<div className='list-title'>{item.title}</div>
							<div className='list-icon'>
								<span><CalendarOutlined /> 2019-06-28</span>
								<span><FolderOutlined /> 视频教程</span>
								<span><FireOutlined /> 5498人</span>
							</div>
							<div className='list-context'>{item.context}</div>
						</List.Item>
					)}
				/>

			</Col>
			<Col className='comm-box' xs={0} sm={0} md={7} lg={5} xl={4} >
				<Author />
				<Advert />
			</Col>
		</Row>
		<Footer />				
    </div>
  )
}
